// 在传统得状态管理思路中，我们需要在代码里用redux recoil等库去坐一系列得数据管理
// 但是如果把URL后面得那串query想象成数据库呢？是不是也可以，尝试结合react-router封装一下

import { useHistory, useLocation } from 'react-router-dom';
import { useEffect, useRef } from 'react';
import qs from 'query-string';

export function useQuery() {
  const history = useHistory()
  const { search, pathname } = useLocation()

  // 保存query状态
  const queryState = useRef(qs.parse(search));

  // 设置query
  const setQuery = handle => {
    const nextQuery = handle(queryState.current);
    queryState.current = nextQuery;

    // replace会使组件更新渲染
    history.replace({
      pathname: pathname,
      search: qs.stringify(nextQuery)
    })
  }

  return [
    queryState.current,
    setQuery
  ]
}




// 组件中使用
const [query, setQuery] = useQuery();

// 接口请求依赖page size

useEffect(() => {
  // api.getUser()
}, [query.page, query, size])

// 分页改变 接口触发重新请求
const onPageChange = page => {
  setQuery(prevQuery => ({
    ...prevQuery,
    page
  }))
}
// 这样，所有页面得状态都会同步到url上，非常方便